import React, { useEffect, useState } from 'react';
import { ArrowLeft, Add, } from '@nutui/icons-react';
import { Button,Popup } from '@nutui/nutui-react'
import './MyHouse.css';
import Housing_Card from '../../Components/Housing_Card/Housing_Card';
import { useNavigate } from 'react-router-dom';
import axios from 'axios'

export default function MyHouse() {
  const navigate = useNavigate()

  const [MyRooms,setMyRooms] = useState([])
  const [showBasic, setShowBasic] = useState(false);

  useEffect(()=>{
    getMyRoom()
  },[]) //获取租住信息

  const getMyRoom = async ()=>{
    const res = await axios.get('http://127.0.0.1:3000/jwh/getMyRoom')
    const {code,myRooms} = res.data
    console.log(code,myRooms)
    if(myRooms){
      myRooms.sort((a,b)=>{return b.def_Status-a.def_Status})
      setMyRooms(myRooms)
    }
    
  }

  //设置为默认
  const setDefault = async (id)=>{
    console.log(id)
    const res = await axios.post('http://127.0.0.1:3000/jwh/setDefault',{_id:id})
    let {code,msg} = res.data;
    if(code==200){
      console.log(msg)
      getMyRoom()
    }
  }

  return (
    <div className='MyHouse'>
      <div className='MyHouse_top'>
        <ArrowLeft className="back-icon" width={"40px"} onClick={() => window.history.back()} />
        <span className="title-text">我的房屋</span>
      </div>
      <div className='MyHouse_content'>
        {
          MyRooms.map((item)=>{
            return <div onClick={()=>setDefault(item._id)}><Housing_Card key={item._id} RoomItem={item}></Housing_Card></div>
          })
        }
      </div>

      <Button type="info" style={{width:'349px',margin:'0 19px',position:'fixed',bottom:'80px'}} onClick={()=>{navigate('/addMyHouse')}}>添加房屋</Button>
    </div>
  );
}